<template>
  <a-table
    :columns="columns"
    :row-key="record => record.host"
    :data-source="data"
    :pagination="pagination"
    :loading="loading"
    @change="handleTableChange"
  >
    <template slot="name" slot-scope="name"> {{ name }} </template>
    <template slot="tags" slot-scope="tags">
      <a-tag
        v-for="tag in tags"
        :key="tag"
        :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
      >
        {{ tag.toUpperCase() }}
      </a-tag>
    </template>
    <span slot="action" slot-scope="action">
        <a @click="gotoRoute(action)">routes</a>  
        <a-divider type="vertical" />   
        <a @click="gotoUpstream(action)">upstream</a>
    </span>
  </a-table>
</template>
<script>
import axios from 'axios';
const queryData = params => {
  return axios.get('http://172.16.109.44:9725/services', { params: params });
};
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    sorter: true,
    width: '20%',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Host',
    dataIndex: 'host',
  },
  {
    title: 'Tags',
    dataIndex: 'tags',
    width: '20%',
    scopedSlots: { customRender: 'tags' },
  },
  {
    title: 'Action',
    key: 'operation',
    fixed: 'right',
    width: 200,
    scopedSlots: { customRender: 'action' },
  }
];

export default {
  data() {
    return {
      data: [],
      pagination: false,
      loading: false,
      columns,
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    gotoRoute(action){
      console.log(action)
      this.$router.push({
        path: '/routes',
        query: {
          serviceId: action.name
        }
      })
    },
    gotoUpstream(action){
      console.log(action)
      this.$router.push({
        path: '/upstream',
        query: {
          upstreamName: action.host
        }
      })
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      // const pager = { ...this.pagination };
      // pager.current = pagination.current;
      // this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        // page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch(params = {}) {
      this.loading = true;
      queryData({
        results: 10,
        ...params,
      }).then(({ data }) => {
        console.log(data)
        // const pagination = { ...this.pagination };
        // Read total count from server
        // pagination.total = data.totalCount;
        // pagination.total = 200;
        this.loading = false;
        this.data = data;
        // this.pagination = pagination;
      });
    },
  },
};
</script>
